<kbn-management-app section="kibana">
  <kbn-management-advanced class="kuiViewContent kuiViewContent--constrainedWidth kuiViewContentItem">
    <!-- Warning -->
    <div class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm">
      <div class="kuiInfoPanelHeader">
        <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"></span>
        <span class="kuiInfoPanelHeader__title" id="kbnManagementAdvancedWarning">
          Caution: You can break stuff here
        </span>
      </div>

      <div class="kuiInfoPanelBody">
        <div class="kuiInfoPanelBody__message">
          Be careful in here, these settings are for very advanced users only.
          Tweaks you make here can break large portions of Kibana. Some of these
          settings may be undocumented, unsupported or experimental. If a field has a default value,
          blanking the field will reset it to its default which
          may be unacceptable given other configuration directives. Deleting a
          custom setting will permanently remove it from Kibana's config.
        </div>
      </div>
    </div>

    <!-- Search -->
    <form
      role="form"
      class="kuiVerticalRhythm"
    >
      <div class="kuiSearchInput fullWidth">
        <div class="kuiSearchInput__icon kuiIcon fa-search"></div>
        <input
          class="kuiSearchInput__input"
          aria-label="Search"
          ng-model="advancedFilter"
          type="text"
          placeholder="Search..."
          aria-describedby="kbnManagementAdvancedWarning"
        >
      </div>
    </form>

    <!-- Settings table -->
    <table class="kuiTable kuiVerticalRhythm">
      <thead>
        <tr>
          <th scope="col" class="kuiTableHeaderCell">
            <div class="kuiTableRowCell__liner">
              Name
            </div>
          </th>
          <th scope="col" class="kuiTableHeaderCell">
            <div class="kuiTableRowCell__liner">
              Value
            </div>
          </th>
          <th
            scope="col"
            class="kuiTableHeaderCell kuiTableHeaderCell--alignRight"
            style="width: 180px"
          >
            <div class="kuiTableRowCell__liner">
              <!-- Actions -->
            </div>
          </th>
        </tr>
      </thead>

      <tbody>
        <tr
          ng-repeat="conf in configs | filter:advancedFilter"
          advanced-row="conf"
          configs="configs"
        ></tr>
      </tbody>
    </table>
  </kbn-management-advanced>
</kbn-management-app>
